<template>
  <div class="captcha-container">
    <!-- 验证码图片 -->
    <img :src="captchaImage" alt="验证码" class="captcha-image" :style="{ cursor: 'pointer' }" />

    <!-- <button type="button" @click="refreshCaptcha" class="refresh-btn">🔄 刷新</button> -->
  </div>
</template>

<script setup>
import { ref, onMounted, defineExpose } from 'vue';
// 存储验证码图片的 base64 数据
const captchaImage = ref('');

// 生成随机验证码文本（4位）
const generateText = () => {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // 去除易混淆字符如 0/O, 1/I/L
  let text = '';
  for (let i = 0; i < 4; i++) {
    text += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return text;
};

const setVerifyCode = (value) => {
  captchaText.value = value
    drawCaptcha();
}

// 当前验证码值，可用于后续比对
// const captchaText = ref(generateText());
const captchaText = ref("");

// 绘制验证码到 canvas 并转为图片
const drawCaptcha = () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 设置画布尺寸
  canvas.width = 100;
  canvas.height = 40;

  // 背景色
  ctx.fillStyle = '#f0f0f0';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 字体设置
  ctx.font = 'bold 20px Arial';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // 验证码颜色数组
  const colors = ['#333', '#c00', '#0099cc', '#66cc00'];
  // 绘制每个字符
  for (let i = 0; i < captchaText.value.length; i++) {
    const char = captchaText.value[i];
    ctx.fillStyle = colors[i % colors.length];
    // 添加轻微随机位置偏移
    const x = (canvas.width / 4) * (i + 0.5) + (Math.random() - 0.5) * 10;
    const y = canvas.height / 2 + (Math.random() - 0.5) * 5;
    const angle = (Math.random() - 0.5) * 0.5;
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angle);
    ctx.fillText(char, 0, 0);
    ctx.restore();
  }

  // 添加干扰线
  for (let i = 0; i < 3; i++) {
    ctx.strokeStyle = colors[Math.floor(Math.random() * colors.length)];
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.stroke();
  }

  // 添加干扰点
  for (let i = 0; i < 30; i++) {
    ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
    ctx.beginPath();
    ctx.arc(
      Math.random() * canvas.width,
      Math.random() * canvas.height,
      1,
      0,
      Math.PI * 2
    );
    ctx.fill();
  }

  // 转换为 base64 图片
  captchaImage.value = canvas.toDataURL('image/png');
};

// 刷新验证码
const refreshCaptcha = () => {
  captchaText.value = generateText();
  drawCaptcha();
};

// 暴露给父组件的方法和数据
defineExpose({
  setVerifyCode,
  captchaText, // 允许父组件获取当前验证码文本
  refreshCaptcha, // 允许父组件手动刷新
});

// 组件挂载后首次绘制
onMounted(() => {
  drawCaptcha();
});
</script>

<style scoped>
.captcha-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.captcha-image {
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 40px;
}

.refresh-btn {
  padding: 8px 12px;
  font-size: 14px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.refresh-btn:hover {
  background-color: #e0e0e0;
}
</style>